<template>
  <div class="w-full h-full ">
    <div id="lineCharts" class="w-full h-full"></div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts';
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
onMounted(() => {
  init()
})
const init = () => {
  const keys = Object.keys(props.data)
    var chartDom = document.getElementById('lineCharts');
    var myChart = echarts.init(chartDom);
    var option;
   let unfinish = []
   let finish = []
  // 筛选出props.data对象中key为“未完成”的value值
  for(let item in props.data ) {
    if(item === '未完成') {
      unfinish.push(0)
      unfinish.push(props.data[item])
    } else if (item === '已完成') {
      finish.push(props.data[item])
      finish.push(0)
    }
  }

  option = option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {
      textStyle: {
        color: '#ffffff'
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '14%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLine: { //x轴线的颜色以及宽度
        show: true,
        lineStyle: {
          color: '#fff',
          width: 0,
          type: 'solid',
        },
      },
    },
    yAxis: {
      type: 'category',
      data: ['已完成', '未完成'],
      axisLine: { //x轴线的颜色以及宽度
        show: true,
        lineStyle: {
          color: '#fff',
          width: 0,
          type: 'solid',
        },
      },
    },
    series: [
      {
        name: '已完成',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data:finish
      },
      {
        name: '未完成',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: unfinish
      },
    ]
  };
    option && myChart.setOption(option);
}
</script>

<style scoped>

</style>
